<template>
  <div>
    <button @click="addBlock">添加区块</button>
    <div v-for="block in blocks" :key="block.id" class="block">
      <button @click="removeBlock(block.id)">删除区块</button>
      <slot name="blockContent" :block="block"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      blocks: [], // 存储区块的数组
    }
  },
  methods: {
    addBlock() {
      const newBlock = {
        id: Date.now(), // 使用当前时间戳作为唯一标识符
      }
      this.blocks.push(newBlock)
    },
    removeBlock(id) {
      const index = this.blocks.findIndex((block) => block.id === id)
      if (index !== -1) {
        this.blocks.splice(index, 1)
      }
    },
  },
}
</script>
<style>
.block {
  border: 2px solid orangered;
}
</style>
